<template>
	<view>
		<view class="qiun-charts">
			<canvas canvas-id="Budget" id="Budget" class="charts-pie" @touchstart="touchLineA" @touchmove="moveLineA" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js'
	var _this;
	var Budget = null;

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				piearr: [],
				BudgetData: {
					"categories": ["妇科", "妇保科", "产科", "健康体验中心", "儿保科", "计划生育康复科门诊"],
					"series": [{
						"name": "检查",
						"data": [35, 36, 31, 33, 13, 34]
					}, {
						"name": "化验",
						"data": [18, 27, 21, 13, 10, 23]
					}, {
						"name": "治疗",
						"data": [32, 27, 12, 24, 16, 21]
					}, {
						"name": "手术",
						"data": [14, 27, 32, 34, 20, 12]
					}, {
						"name": "放射",
						"data": [22, 23, 13, 24, 16, 28]
					}, {
						"name": "诊察",
						"data": [23, 36, 21, 21, 18, 30]
					}]
				}
			}
		},
		onLoad() {
			_this = this;
			this.cWidth = uni.upx2px(750)
			this.cHeight = uni.upx2px(500)
			this.refreshList();
		},
		methods: {
			refreshList() {
				_this.StructuralAnalysis("Budget", this.BudgetData)
			},
			// 图表渲染
			StructuralAnalysis(canvasId, chartData) {
				Budget = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'column',
					legend: true,
					fontSize: 11,
					dataLabel: false, // 隐藏数据点标签
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					animation: true,
					enableScroll: true, // 开启图表拖拽功能
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true, // 绘制Y坐标轴网格
						itemCount: 5, // x轴单屏显示数据的数量，默认为5个
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						//disabled:true
					},
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					extra: {
						column: {
							type: 'stack',
							width: _this.cWidth * _this.pixelRatio * 0.5 / chartData.categories.length
						}
					}
				})
			},
			// 触摸
			touchLineA(e) {
				Budget.scrollStart(e)
				Budget.scrollEnd(e)
				Budget.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return item.name + ':' + item.data.value
						} else {
							return item.name + ':' + item.data
						}
					}
				})
			},

			// 移动
			moveLineA(e) {
				Budget.scroll(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.age-conlist {
		display: flex;
		padding: 20rpx 40rpx;
		border-bottom: 1px solid $uni-border-color;

		.age-conflex {
			flex: 1;
		}

		.age-center {
			text-align: center;
		}

		.age-right {
			text-align: right;
		}

		.age-pic {
			padding: 4rpx 14rpx;
			background-color: #1ae1ff;
			border-radius: 50%;
			color: #FFFFFF;
		}
	}
</style>
